<template>
  <div class="Journal">
    <div class="page-head">
      <div class="page-title">日志查看</div>
      <div class="page-tool">
        <el-select
          class="tool-sel mr0i"
          placeholder="操作类别"
          v-model="type"
          clearable
        >
          <el-option
            v-for="item in logTypes"
            :key="item.key"
            :value="item.key"
            :label="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="page-body">
      <div class="table_data">
        <el-scrollbar class="scroll-bar">
          <el-table :data="tableData" :fit="true" stripe>
            <el-table-column
              width="20"
            />
            <el-table-column
              prop="op_time"
              width="200"
              :show-overflow-tooltip="true"
              label="时间"
            >
            </el-table-column>
            <el-table-column
              prop="op_user_name"
              :show-overflow-tooltip="true"
              label="操作人"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="操作类别"
              width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <div>
                  {{ logTypes.find((log) => log.key == row.type).value }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="op_msg"
              label="执行动作"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="page-footer">
        <pagina-tion
          class="page-pager"
          v-show="total >= 0"
          :background="true"
          :total="total"
          :offset.sync="offset"
          :limit.sync="limit"
          @pagination="getChangePage"
        />
        <button class="page-button">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api";
import { limit,middleLimit } from "@/consts/consts";
import { logTypes } from "@/consts/codesMap";

export default {
  data() {
    return {
      limit:document.body.clientHeight>= 770 ? limit : middleLimit,
      total: 0,
      offset: 0,
      tableData: [],
      type: "",
      logTypes,
    };
  },
  watch: {
    type() {
      this.offset = 0
      this.operLog();
    },
  },
  methods: {
    getChangePage(val) {
      this.offset = val.offset;
      this.operLog();
    },

    async operLog() {
      const { code, data, total } = await api.journal(this).operLog({
        type: this.type,
        offset: this.offset,
        limit:this.limit
      });
      if (code === 0) {
        this.tableData = data;
        this.total = total;
      }
    },
  },
  created() {
    this.operLog();
  },
};
</script>

<style lang="stylus">
.Journal {
 
}
</style>